import React, { Component } from 'react'

const MyContext = React.createContext()
const { Provider } = MyContext
export default class A extends Component {
  state = {
    count: 0,
    age: 24
  }
  render() {
    return (
      <>
        <h2>我是A组件</h2>
        <h2>count值为: {this.state.count}</h2>
        <Provider value={{...this.state}}>
          <B />
        </Provider>
      </>
    )
  }
}

class B extends Component {
  // 声明接收
  static contextType = MyContext
  render() {
    return (
      <>
        <h2>我是B组件</h2>
        <h2>count值为: {this.context.count}</h2>
        <h2>age值为: {this.context.age}</h2>
        <C />
      </>
    )
  }
}

class C extends Component {
  // 声明接收
  static contextType = MyContext
  render() {
    // console.log(this.context)
    return (
      <>
        <h2>我是C组件</h2>
        <h2>count值为: {this.context.count}</h2>
        <h2>age值为: {this.context.age}</h2>
      </>
    )
  }
}
